<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8" />

	<!-- Set the viewport width to device width for mobile -->
	<meta name="viewport" content="width=device-width" />

	<title>Welcome to Foundation</title>
  
	<!-- Included CSS Files -->
	<link rel="stylesheet" href="stylesheets/foundation.css">
	<link rel="stylesheet" href="stylesheets/app.css">

	<!--[if lt IE 9]>
		<link rel="stylesheet" href="stylesheets/ie.css">
	<![endif]-->


	<!-- IE Fix for HTML5 Tags -->
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

</head>
<body>

	<!-- container -->
	<div class="container">

		<div class="row">
			<div class="twelve columns header">
				<h2>iCare App Backend</h2>
				<p class="slogan">Slogan gaat hier</p>
			</div>
		</div>
		
		<div class="row">
			<div class="twelve columns banner">
				<div class="nine columns">
					<h4>Welkom $medewerker</h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
				</div>	
				<div class="three columns profile">
					<h4>Mijn profiel</h4>
					<p>Naam</p>
					<p>Rol</p>
					<p>Telefoon</p>
				</div>
			</div>
		</div>	
		
		<div class="row">
		
			<div class="twelve columns errors">
			
				<div class="alert-box success">
					This is a success alert (div.alert-box.success).
					<a href="" class="close">&times;</a>
				</div>
				
				<div class="alert-box warning">
					This is a success alert (div.alert-box.success).
					<a href="" class="close">&times;</a>
				</div>
				
				<div class="alert-box error">
					This is a success alert (div.alert-box.success).
					<a href="" class="close">&times;</a>
				</div>
				
			</div>	
		
		</div>
		
		<div class="row">
		
			<div class="twelve columns c-overzicht">
				<h4>Algemeen overzicht</h4>
				
				
					<dl class="nice contained tabs">
					  <dd class="test"><a href="#nice1" class="active">Clienten overzicht</a></dd>
					  <dd class="test"><a href="#nice2">Medewerkers overzicht</a></dd>
					  <dd class="test"><a href="#nice3">Clienten toevoegen</a></dd>
					</dl>
					
					<ul class="nice tabs-content contained">
					  <li class="active" id="nice1Tab">
					  					
		  					<table>
		  						<thead>
		  							<tr>
		  								<th>Table Header</th>
		  								<th>Table Header</th>
		  								<th>Table Header</th>
		  								<th>Table Header</th>
		  	
		  							</tr>
		  						</thead>
		  						<tbody>
		  							<tr>
		  								<td>Content</td>
		  								<td>This is longer content</td>
		  								<td>Content</td>
		  	
		  								<td>Content</td>
		  							</tr>
		  							<tr>
		  								<td>Content</td>
		  								<td>This is longer content</td>
		  								<td>Content</td>
		  								<td>Content</td>
		  	
		  							</tr>
		  							<tr>
		  								<td>Content</td>
		  								<td>This is longer content</td>
		  								<td>Content</td>
		  								<td>Content</td>
		  							</tr>
		  	
		  							<tr>
		  								<td>Content</td>
		  								<td>This is longer content</td>
		  								<td>Content</td>
		  								<td>Content</td>
		  							</tr>
		  						</tbody>
		  	
		  					</table>
		  					
		  					<a class="white radius nice button" href="#">Opslaan in database &raquo;</a>
					  </li>
					  <li id="nice2Tab">
					  	This is nice tab 2's content. Now you see it!
					  </li>
					  <li id="nice3Tab">
		  					<form class="nice">
		  						<p>Changing the form style to a slightly fancier version is dead simple - just add a class of 'nice' to the form itself.</p>
		  	
		  						<label>Standard Input</label>
		  						<input type="text" class="input-text" />
		  	
		  						<input type="text" placeholder="Inline label" class="input-text" />
		  	
		  						<label>Small Input</label>
		  	
		  						<input type="text" class="small input-text" />
		  	
		  						<div class='form-field error'>
		  							<label>Medium Input (with wrapper)</label>
		  							<input type="text" class="medium input-text" />
		  							<small>Whoa, cowboy. Try that again.</small>
		  						</div>
		  						
		  						<label class="red">Medium Input</label>
		  	
		  						<input type="text" class="medium red input-text" />
		  						<small class="error">Whoa, cowboy. Try that again.</small>
		  	
		  						<label>Large Input</label>
		  						<input type="text" class="large input-text" />
		  	
		  						<label>Oversize Input</label>
		  						<input type="text" class="oversize input-text" />
		  	
		  						<label>Textarea</label>
		  						<textarea>This is a textarea</textarea>
		  	
		  						<label>Inline Label Textarea</label>
		  						<textarea placeholder="This is a text area"></textarea>
		  	
		  						<label for="checkbox1"><input type="checkbox" id="checkbox1"> Label for Checkbox</label>
		  	
		  						<label for="radio1"><input type="radio" id="radio1"> Label for Radio</label>
		  	
		  						<label>Dropdown Label</label>
		  						<select>
		  							<option>This is a dropdown</option>
		  							<option>This is another option</option>
		  	
		  							<option>Look, a third option</option>
		  						</select>
		  	
		  						<div class="row">
		  							<div class="seven columns">
		  								<fieldset>
		  									<h5>Fieldset Header H2</h5>
		  									<p>This is a paragraph within a fieldset.</p>
		  	
		  									<label>Standard Input</label>
		  									<input type="text" class="input-text" />
		  								</fieldset>
		  							</div>
		  						</div>
		  					</form>
		  					
		  					<a class="white radius nice button" href="#">Opslaan in database &raquo;</a>
					  </li>
					</ul>
			</div>	
		</div>
		
	</div>
	<!-- container -->




	<!-- Included JS Files -->
	<script src="javascripts/foundation.js"></script>
	<script src="javascripts/app.js"></script>
	<script src="javascripts/jquery.roundabout.min.js"></script> 

</body>
</html>
